package com.example.social.screen

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import com.example.social.item_view.UserItem
import com.example.social.viewmodel.SearchViewModel

@Composable
fun Search(navHostController1: NavHostController, navController: NavHostController) {
    // 创建 ViewModel 实例，用于获取用户数据
    val searchViewModel: SearchViewModel = viewModel()

    // 从 ViewModel 获取用户列表
    val userList by searchViewModel.userList.observeAsState(emptyList())

    // 用于保存搜索的关键字
    var search by remember {
        mutableStateOf("")
    }

    Column(modifier = Modifier.padding(16.dp)) {
        // 搜索页面的标题
        Text(
            text = "搜索",
            style = TextStyle(
                fontWeight = FontWeight.ExtraBold,
                fontSize = 24.sp
            )
        )

        // 搜索框，使用 OutlinedTextField
        OutlinedTextField(
            value = search,
            onValueChange = { search = it },  // 更新搜索关键字
            label = { Text(text = "搜索用户") },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Text
            ),
            singleLine = true,
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp),
            leadingIcon = {
                Icon(imageVector = Icons.Default.Search, contentDescription = null)
            }
        )

        // 空间间隔
        Box(modifier = Modifier.height(20.dp))

        // 使用 LazyColumn 来显示过滤后的用户列表
        LazyColumn {
            if (userList.isNotEmpty()) {
                // 过滤出符合搜索条件的用户
                val filterItem = userList.filter {
                    it.username.contains(search, ignoreCase = true)
                }

                // 显示过滤后的用户列表
                items(filterItem) { item ->
                    UserItem(item, navController)  // 使用 UserItem 显示每个用户
                }
            } else {
                // 如果没有找到匹配的用户，显示提示信息
                item {
                    Text(text = "没有找到用户", modifier = Modifier.padding(16.dp))
                }
            }
        }
    }
}
